<ix-page-header [loading]="!!(dataProvider.isLoading$ | async)">
  <ix-search-input1
    [value]="filterString"
    (search)="onListFiltered($event)"
  ></ix-search-input1>

  <ix-table-columns-selector
    [columnPreferencesKey]="'diskList'"
    [columns]="columns"
    (columnsChange)="columnsChange($event)"
  ></ix-table-columns-selector>
</ix-page-header>

@if (selectedDisks.length) {
  <div
    class="batch-actions-toolbar"
    [ixUiSearch]="searchableElements.elements.disks"
  >
    <div class="title">
      <strong>{{ 'Batch Operations' | translate }}</strong>
    </div>
    <div class="actions">
      <button
        mat-button
        ixTest="edit-selected"
        (click)="edit(selectedDisks)"
      >
        <ix-icon name="edit"></ix-icon>
        <span>
          @if (selectedDisks.length === 1) {
            {{ 'Edit Disk' | translate }}
          } @else {
            {{ 'Edit Disks' | translate }}
          }
        </span>
      </button>
    </div>
  </div>
}

<ix-table
  class="table"
  [ix-table-empty]="!(dataProvider.currentPageCount$ | async)"
  [emptyConfig]="emptyConfig"
>
  <thead
    ix-table-head
    [columns]="columns"
    [dataProvider]="dataProvider"
  ></thead>
  <tbody
    ix-table-body
    detailsRowIdentifier="identifier"
    [columns]="columns"
    [dataProvider]="dataProvider"
    [isLoading]="!!(dataProvider.isLoading$ | async)"
  >
    <ng-template let-disk ix-table-details-row [dataProvider]="dataProvider">
      <ix-table-details-row [hiddenColumns]="hiddenColumns" [row]="disk">
        <div class="table-details-row-actions">
          <button
            mat-button
            [ixTest]="[disk.name, 'edit']"
            (click)="edit([disk])"
          >
            <ix-icon name="edit"></ix-icon>
            <span>{{ 'Edit' | translate }}</span>
          </button>

          @if (isUnusedDisk(disk)) {
            <button
              *ixRequiresRoles="requiredRoles"
              mat-button
              [ixTest]="[disk.name, 'wipe']"
              (click)="wipe(disk)"
            >
              <ix-icon name="delete_sweep"></ix-icon>
              <span>{{ 'Wipe' | translate }}</span>
            </button>
          }
        </div>
      </ix-table-details-row>

    </ng-template>
  </tbody>
</ix-table>
<ix-table-pager [dataProvider]="dataProvider"></ix-table-pager>
